<template>
  <div class="terms-container">
    <!-- 顶部返回按钮（固定在顶部） -->
    <div class="top-bar">
      <button @click="handleBack" class="back-btn">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="22"
          height="22"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round">
          <path d="m12 19-7-7 7-7" />
          <path d="M19 12H5" />
        </svg>
        <span class="back-text">Back</span>
      </button>
    </div>

    <!-- 协议内容区 -->
    <main class="terms-content">
      <div class="terms-update">Last Updated: October 30, 2025</div>
      <div class="terms-intro">
        Welcome to Nexbie. These Terms and Conditions ("Terms") govern your access to and use of the
        Nexbie website, services, and applications (collectively, the "Service"), operated by
        Shenzhen NexusMake Technology Co., Ltd. Please read these Terms carefully.
      </div>

      <!-- 条款列表（折叠交互） -->
      <section class="terms-list">
        <div
          class="term-item"
          v-for="(term, index) in terms"
          :key="index"
          :class="{ 'large-line-height': [1, 2, 3, 5].includes(index) }">
          <!-- 条款标题（可点击折叠/展开） -->
          <div class="term-title" @click="toggleTerm(index)">
            <span class="term-number">{{ index + 1 }}.</span>
            <span class="term-heading">{{ term.title }}</span>
            <span class="toggle-icon" :class="{ expanded: term.expanded }">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round">
                <path d="M6 9l6 6 6-6" />
              </svg>
            </span>
          </div>

          <!-- 条款内容 -->
          <div class="term-content" v-if="term.expanded" :class="{ expanding: term.expanding }">
            <div v-html="term.content" class="content-inner"></div>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  // 返回上一页
  const handleBack = () => {
    router.back();
  };

  // 条款数据
  const terms = ref([
    {
      title: 'Acceptance of Terms',
      content: `By creating an account or using our Service, you agree to be bound by these Terms and our Privacy Policy. If you do not agree, you may not use the Service.`,
      expanded: false,
      expanding: false,
    },
    {
      title: 'User Accounts',
      content: `
      <ul class="term-sub-list">
        <li>- Eligibility: You must be at least 18 years old to use Nexbie.</li>
        <li>- Account Security: We are committed to protecting your account and will implement reasonable and necessary security measures to maintain a secure environment. As the registered owner of the account, you agree that you are also responsible for safeguarding your account information. You are responsible for all activities that occur under your account and must notify us immediately of any unauthorized use.</li>
        <li>- Account Termination: You may delete your account at any time. We reserve the right to suspend or terminate your account if you violate these Terms or our Community Rules.</li>
      </ul>
    `,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Content and Ownership',
      content: `
      <ul class="term-sub-list">
        <li>- Your Content: You retain all ownership rights to the original content you post or upload to Nexbie ("Your Content"). This includes text prompts, uploaded images, and 3D files.</li>
        <li>- AI-Generated Content: You own the AI-generated artwork you create using Nexbie's tools, subject to the rights of any underlying assets you used.</li>
        <li>- License to Nexbie: By posting content, you grant Nexbie a worldwide, non-exclusive, royalty-free license to use, reproduce, modify, display, and distribute your content in connection with operating and promoting the Service (e.g. posting your content on Nexbie's official social media or utilizing your content for onsite display). This license ends when you delete your content or your account.</li>
        <li>- Responsibility:
          <p class="term-paragraph">You are solely responsible for Your Content and ensuring you have the rights to authorize it and use it in accordance with this agreement and our policies. You agree not to post content that infringes on any third-party.</p>
          <p class="term-paragraph">You shall indemnify, defend, and hold us harmless against all claims that may be brought against us arising from any alleged infringement in connection with your use of our Services. You shall also compensate us for all losses, including but not limited to legal fees, attorney fees, and settlement amounts. If we receive any infringement claims, we may choose to take the following measures respectively or collectively:
            <ol class="term-ol-list">
              <li>(a) Immediately remove or disable access to the allegedly infringing content;</li>
              <li>(b) Notify you of the claim and, where appropriate, forward the complaint to you;</li>
              <li>(c) Withhold any earnings or revenue generated by or associated with the allegedly infringing content;</li>
              <li>(d) Suspend your ability to post new content or access certain features;</li>
              <li>(e) Suspend or terminate your account, particularly in cases of repeated infringement;</li>
              <li>(f) Provide your information to the claimant as required by law or to facilitate a direct resolution of the dispute.</li>
            </ol>
          </p>
        </li>
      </ul>
    `,
      expanded: false,
      expanding: false,
    },
    {
      title: 'The "Nex" Feature',
      content: `
      <ul class="term-sub-list">
        <li>- Selection: Nexbie may, at its sole discretion, select user-generated content to be featured in a "Nex" campaign.</li>
        <li>- Campaigns: All Nex campaigns have a funding goal and a time limit. If successful, Nexbie will manage production and fulfillment. If it fails, all backers will be fully refunded under the crowdfunding system.</li>
        <li>- Revenue: If a Nex campaign you created is successful and the product is sold, you will earn a share of the revenue as detailed in your Payout Information settings or notified by the Nexbie team.</li>
        <li>- Refunds: If a successfully funded Nex product or a purchased store item is delivered and found to be significantly different from the product images, you are eligible to apply for a full refund.</li>
      </ul>
    `,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Pro Accounts',
      content: `Pro accounts are available via an application process and grant users access to advanced features, such as uploading their own design files. Pro accounts are subject to the same Terms and Community Rules.`,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Payments and Withdrawals',
      content: `
      <ul class="term-sub-list">
        <li>- Earnings: You may earn money through contest prizes and successful Nex campaigns. Your balance is displayed in your account or notified by the Nexbie team.</li>
        <li>- Withdrawals: You may request a withdrawal of your earnings. Payouts are processed via supported methods like PayPal or Zelle. You are responsible for any transaction fees and taxes.</li>
      </ul>
    `,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Prohibited Conduct',
      content: `You agree not to engage in any activity that is illegal, harmful, or violates our Community Rules or Public Content Policy.`,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Disclaimers and Limitation of Liability',
      content: `The Service is provided "as is." Nexbie is not liable for any damages or losses arising from your use of the Service.`,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Governing Law and Dispute Resolution',
      content: `These Terms shall be governed by the laws of the State of California, without regard to its conflict of law provisions. Any dispute, controversy, difference or claim arising out of or relating to the Agreement, including the existence, validity, interpretation, performance, breach or termination thereof or any dispute regarding any obligations arising out of or relating to it shall be referred to and finally resolved by arbitration administered by the Hong Kong International Arbitration Centre (HKIAC) under the HKIAC Arbitration Rules in force when the Notice of Arbitration is submitted. The seat of arbitration shall be Hong Kong. The arbitration language will be English. The arbitral award shall be final and binding upon both of the parties.`,
      expanded: false,
      expanding: false,
    },
    {
      title: 'Changes to Terms',
      content: `We may modify these Terms at any time. We will notify you of any changes by posting the new Terms on this page.`,
      expanded: false,
      expanding: false,
    },
  ]);

  // 切换条款的展开/折叠状态
  const toggleTerm = (index) => {
    terms.value.forEach((term, i) => {
      if (i !== index) {
        term.expanded = false;
        term.expanding = false;
      }
    });

    const currentTerm = terms.value[index];
    currentTerm.expanded = !currentTerm.expanded;

    if (currentTerm.expanded) {
      currentTerm.expanding = true;
      setTimeout(() => {
        currentTerm.expanding = false;
      }, 300);
    }
  };
</script>

<style scoped>
  /* 全局样式 */
  .terms-container {
    width: 100%;
    min-height: 100vh;
    background-color: #f8f8f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 54px;
  }

  /* 顶部返回栏 */
  .top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 54px;
    padding: 0 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 100;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .back-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    margin: 0;
    height: 100%;
  }

  .back-btn svg {
    margin-right: 8px;
    color: #f76b1b;
    flex-shrink: 0;
  }

  .back-text {
    transition: color 0.2s ease;
    flex-shrink: 0;
  }

  .back-btn:hover .back-text {
    color: #f76b1b;
  }

  /* 内容区域 */
  .terms-content {
    padding: 0 20px 30px;
    max-width: 800px;
    margin: 0 auto;
  }

  .terms-update {
    font-size: 14px;
    color: #666;
    margin: 0 0 16px;
    line-height: 1.8;
  }

  .terms-intro {
    font-size: 15px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 24px;
  }

  /* 条款列表 */
  .terms-list {
    background-color: #fff;
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  /* 条款项 */
  .term-item {
    border-bottom: 1px solid #f0f0f0;
  }

  .term-item:last-child {
    border-bottom: none;
  }

  /* 条款标题 */
  .term-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .term-title:hover {
    background-color: #fafafa;
  }

  .term-number {
    font-weight: 600;
    color: #f76b1b;
    margin-right: 10px;
    font-size: 15px;
  }

  .term-heading {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }

  /* 折叠/展开图标 */
  .toggle-icon {
    color: #999;
    transition: transform 0.3s ease, color 0.3s ease;
  }

  .toggle-icon.expanded {
    transform: rotate(180deg);
    color: #f76b1b;
  }

  /* 条款内容区域 - 增加内边距 */
  .term-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  /* 内容内部容器 - 主要内边距设置 */
  .content-inner {
    padding: 16px 24px; /* 增加内边距，上下16px，左右24px */
    font-size: 14px;
    color: #333;
    line-height: 1.9;
  }

  .large-line-height .content-inner {
    line-height: 2.1;
  }

  .large-line-height .term-sub-list li {
    line-height: 2.1;
  }

  .large-line-height .term-paragraph {
    line-height: 2.1;
  }

  .large-line-height .term-ol-list li {
    line-height: 2.1;
  }

  .term-content.expanding {
    overflow: hidden;
  }

  /* 调整最大高度以适应内边距 */
  .term-item:nth-child(1) .term-content {
    max-height: 250px;
  }
  .term-item:nth-child(2) .term-content {
    max-height: 750px;
  }
  .term-item:nth-child(3) .term-content {
    max-height: 1500px;
  }
  .term-item:nth-child(4) .term-content {
    max-height: 750px;
  }
  .term-item:nth-child(5) .term-content {
    max-height: 350px;
  }
  .term-item:nth-child(6) .term-content {
    max-height: 500px;
  }
  .term-item:nth-child(7) .term-content {
    max-height: 350px;
  }
  .term-item:nth-child(8) .term-content {
    max-height: 350px;
  }
  .term-item:nth-child(9) .term-content {
    max-height: 700px;
  }
  .term-item:nth-child(10) .term-content {
    max-height: 350px;
  }

  /* 子列表样式 */
  .term-sub-list {
    margin: 10px 0 18px 0;
    padding-left: 20px;
  }

  .term-sub-list li {
    margin-bottom: 12px;
    line-height: 1.9;
  }

  .term-sub-list li:last-child {
    margin-bottom: 0;
  }

  /* 段落样式 */
  .term-paragraph {
    margin: 12px 0;
    line-height: 1.9;
  }

  /* 有序列表 */
  .term-ol-list {
    margin: 12px 0 18px 24px;
    padding: 0;
  }

  .term-ol-list li {
    margin-bottom: 10px;
    line-height: 1.9;
  }

  /* 响应式调整 */
  @media (max-width: 375px) {
    .terms-container {
      padding-top: 50px;
    }

    .top-bar {
      height: 50px;
      padding: 0 16px;
    }

    .terms-content {
      padding: 0 16px 20px;
    }

    .terms-update {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.7;
    }

    .terms-intro {
      font-size: 14px;
      line-height: 1.7;
    }

    .term-title {
      padding: 14px 16px;
    }

    .term-number {
      font-size: 14px;
      margin-right: 8px;
    }

    .term-heading {
      font-size: 14px;
    }

    /* 移动端内边距适当减小 */
    .content-inner {
      padding: 14px 20px;
      font-size: 13px;
      line-height: 1.8;
    }

    .large-line-height .content-inner {
      line-height: 2;
    }
  }
</style>
